<template>
  <div>
    <el-form ref="form" :model="userFrom" label-width="120px">
      <el-form-item label="账号:">
        <el-input v-model="userFrom.account" placeholder="请输入账号"/>
      </el-form-item>

      <el-form-item label="姓名:">
        <el-input v-model="userFrom.name" placeholder="请输入姓名"/>
      </el-form-item>

      <el-form-item label="岗位:">
        <el-select v-model="userFrom.stationId" placeholder="请选择">
          <el-option value="" label="请选择"/>
          <el-option v-for="(item,index) in roleData" :value="item.id" :label="item.name"/>
        </el-select>
      </el-form-item>

      <el-form-item label="邮箱:">
        <el-input v-model="userFrom.email" placeholder="请输入邮箱"/>
      </el-form-item>


      <el-form ref="form" :model="userFrom" label-width="120px" :inline="true" class="demo-form-inline">
        <el-form-item label="手机号:">
          <el-input v-model="userFrom.mobile" placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-if="abledBut===false" :disabled="abledBut" @click="sendCode">
            发送短信
          </el-button>
          <el-button type="primary" v-if="abledBut===true" :disabled="abledBut">
            {{ setTimeNum }}
          </el-button>
        </el-form-item>
      </el-form>

      <el-form-item label="验证码:">
        <el-input v-model="userFrom.code" placeholder="请输入验证码"/>
      </el-form-item>


      <el-form-item label="性别:">
        <el-radio border label="M" v-model="userFrom.sex">男</el-radio>
        <el-radio border label="W" v-model="userFrom.sex">女</el-radio>
        <el-radio border label="N" v-model="userFrom.sex">未知</el-radio>
      </el-form-item>

      <el-form-item label="是否启用:">
        <el-radio border :label="1" v-model="userFrom.status">启用</el-radio>
        <el-radio border :label="0" v-model="userFrom.status">禁用</el-radio>
      </el-form-item>

      <el-form-item label="头像:">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8000/oss/oss/"
          :headers="token"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="userFrom.avatar" :src="userFrom.avatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="工作描述:">
        <el-input type="textarea" v-model="userFrom.workDescribe" placeholder="请输入工作描述"/>
      </el-form-item>


      <el-form-item label="密码:">
        <el-input type="password" v-model="userFrom.password" show-password placeholder="请输入密码"/>
      </el-form-item>
    </el-form>
    <el-button type="info" @click="cancel">返回</el-button>
    <el-button type="primary" @click="addAuthUser">添加</el-button>

  </div>
</template>

<script>
import index from '@/api/auth/user/index'
import Cookies from 'js-cookie'

export default {
  name: 'add',
  data() {
    return {
      token: { token: '' },
      roleData: [],//角色资源
      abledBut: false, //是否禁止
      setTimeNum: 500,  // 倒计时时间
      timeWrap: null,  // 定时器标识
      /**
       * 用户表单
       */
      userFrom: {
        account: '',//账号
        name: '',//姓名
        stationId: '',//岗位ID
        email: '',//邮箱
        mobile: '',//手机
        sex: '',//性别
        status: 1,//启用状态1启用 0禁用
        avatar: '',//头像
        workDescribe: '',//工作描述
        password: '',//密码
        code: ''//验证码
      }
    }
  },
  watch: {
    /* 使用watch来响应数据的变化 */
    //监听倒计时数据的变化，小于0的时候，清除定时器，解开按钮，重置倒计时
    setTimeNum(newVal, oldVal) {
      if (newVal < 0) {
        clearInterval(this.timeWrap)
        this.abledBut = false
        this.setTimeNum = 500
      }
    }
  },
  mounted() {
    this.queryAllRole()
    this.token.token = Cookies.get('token')
  },
  methods: {
    addAuthUser() {
      index.authUserAdd(this.userFrom).then(data => {
        this.$message({
          showClose: true,
          message: data.message,
          type: data.flag == true ? 'success' : 'error'
        })
        this.cancel()
      })

    },
    cancel() {
      this.$router.push({ path: '/auth/auth-user-index' })
    },
    queryAllRole() {
      index.queryAllCoreStation().then(data => {
        this.roleData = data.data
      })
    },
    //点击事件禁止按钮，触发定时器，每秒-1
    sendCode() {
      if (this.setTimeNum > 0) {
        this.abledBut = true
        this.timeWrap = setInterval(() => {
          this.setTimeNum -= 1
        }, 1000)
      }
      index.sendCode(this.userFrom.mobile).then(data => {
        this.$message({
          showClose: true,
          message: data.data,
          type: 'success'
        })
      })

    },
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.$message({
        showClose: true,
        message: res.message,
        type: res.flag == true ? 'success' : 'error'
      })
      this.userFrom.avatar = res.data
    },
    beforeAvatarUpload(file) {

    }
  }

}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
